<template>
	<div class="game-container">
		<div class="form-params">
			<Header
				v-model="queryData"
				:gameList="gameTypes"
				:disabledSearch="disabledSearch"
				:exportBtnLoading="exportBtnLoading"
				@submit="submit"
				@reset="reset"
				@export="exportExcel"
			/>
		</div>
		<div class="table-content">
			<Table
				:tableData="list"
				:gameList="gameTypes"
				:tableLoading="loading"
				:tableHeight="tableHeight"
			/>
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import Header from './components/Header'
import Table from './components/Table'
import dayjs from 'dayjs'
import list from '@/mixins/list'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(89, 'day')
		.valueOf()

const end = () =>
	dayjs()
		.endOf('day')
		.valueOf()
export default {
	components: {
		Header,
		Table
	},
	mixins: [list],
	props: {
		parentData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			tableHeight: 480,
			disabledSearch: false,
			exportBtnLoading: false,
			queryData: {
				merchantId: undefined,
				userName: undefined,
				tableId: undefined,
				status: [],
				gameTypeIdList: [],
				dateTime: [start(), end()],
				clubId: undefined
			},
			gameList: []
		}
	},
	computed: {
		gameTypes() {
			return this.globalDics.gameTypes || []
		}
	},
	created() {
		this.queryData.merchantId = this.parentData.merchantId
		this.queryData.userName = this.parentData.userName
		this.getDxnGameManagerList()
	},
	mounted() {
		this._initMainContent()
	},
	destroyed() {
		window.removeEventListener('resize', this.calculateTableHeight)
	},
	methods: {
		// 获取游戏列表
		getDxnGameManagerList() {
			// this.$api
			// 	.getDxnGameManagerListBend()
			// 	.then((res) => {
			// 		this.gameList = res.data.gameConfigList || []
			// 	})
			// 	.catch((e) => {
			// 		console.error(e)
			// 	})
		},
		getSearchParams() {
			const [startTime, endTime] = this.queryData.dateTime || []
			const params = {
				...this.queryData,
				createdStartAt: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				createdEndAt: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.status?.length) {
				params.status = undefined
			}
			if (!params.gameTypeIdList?.length) {
				params.gameTypeIdList = undefined
			}
			delete params.dateTime
			return params
		},
		loadData() {
			const params = this.getParams(this.getSearchParams())
			this.loading = true
			this.disabledSearch = true
			this.list = []
			this.$api
				.getDxtableListBend(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.list = Array.isArray(record) ? record : []
					this.total = totalRecord || 0
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
					this.disabledSearch = false
				})
		},
		submit(ruleForm) {
			this.queryData = ruleForm
			this.loadData()
		},
		reset(ruleForm) {
			this.pageNum = 1
			this.queryData = ruleForm
			this.loadData()
		},
		exportExcel(ruleForm) {
			this.queryData = ruleForm
			const params = this.getParams(this.getSearchParams())
			delete params.pageNum
			delete params.pageSize
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'getMemberDxTableListExportBend',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 初始化table区域高度
		_initMainContent() {
			this.$nextTick(() => {
				this.calculateTableHeight()
				window.addEventListener('resize', this.calculateTableHeight)
			})
		},
		// 计算table区域显示内容高度
		calculateTableHeight() {
			const CLIENT_HEIGHT = document.body.clientHeight
			const formArr = document.getElementsByClassName('el-form')
			let formHeight = 340
			for (let i = 0; i < formArr.length; i++) {
				formHeight += formArr[i]?.offsetHeight || 0
			}
			this.tableHeight = CLIENT_HEIGHT - formHeight
		}
	}
}
</script>

<style lang="scss" scoped>
.game-container {
	margin-top: 0px;
}
.form-params {
	padding: 15px 20px 10px 20px;
	margin-top: 0px;
	border-radius: 3px;
	box-shadow: 0 2px 7px #ccc;
}
.table-content {
	margin-top: 15px;
	padding: 10px;
	border-radius: 1px;
	box-shadow: 0 2px 7px #ccc;
	.el-pagination {
		text-align: right;
		margin-top: 15px;
	}
}
</style>
